<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
        #box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 200px;
        }
    </style>
    <script src="./toos.js"></script>
    <script> 
        window.onload = function () {
            //获取box1
            var box1 = document.getElementById("box1");
            //获取btn1
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            var btn3 = document.getElementById("btn3");
            //点击按钮后，box1向右移动
            btn1.onclick = function () {
                move(box1,"left", 800, 20);
            };
            btn2.onclick = function () {
                move(box1,"height", 0, 10);
            }
            btn3.onclick=function(){
                move(box2,"width",800,10);
            }
        };
       

        // var timer;
        
    </script>
</head>

<body>
    <button id="btn1">点击按钮后向右移</button>
    <button id="btn2">点击按钮后向左移</button>
    <button id="btn3">点击按钮后向右移</button>
    <br />
    <br />
    <div id="box1"></div>
    <div id="box2"></div>

    <div style="width: 0;height: 1000px;border-left: 1px solid black;position: absolute;top: 0;left: 800px;"></div>
</body>

</html>